<template>
    <div>
        <ul class="Tabul">
            <span class="span"></span>
            <li v-for="(item,index) in option1" :key="item.value" @click="handleTo(index)">
                <span class="Tabicon"><van-icon :name="item.name" color="white"/></span>
                <span>{{item.text}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: "首页", value: 0 ,name:"wap-home-o"},
        { text: "分类", value: 1 ,name:"apps-o"},
        { text: "购物车", value: 2 ,name:"shopping-cart-o"},
        { text: "我的", value: 3,name:"user-o" },
      ],
    };
  },
  methods: {
    handleTo(idx) {
      if(idx==0){
        this.$router.push("/",idx)
      }
      if(idx==1){
        this.$router.push("/classfy",idx)
      }
      if(idx==2){
        this.$router.push("/goshoppcar",idx)
      }
      if(idx==3){
        this.$router.push("/personal",idx)
      }
      
       
    }
  },
};
</script>

<style  scoped>
.Tabul{
    top:45px;
    left: -50px;
    position: absolute;
     width: 100px;
}
.Tabul>li {
    background-color: #424242;
    list-style: none;
    width: 100%;
    color: #fff;
    line-height: 30px;
    border-bottom: 1px solid #797979;
    opacity: 0.9;
}
.Tabicon{
    margin-right: 5px;
}
.span{
  display: inline-block;
  width: 0px;
  height: 0px;
  /* border-bottom: 10px solid #333;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff; */
  border-style: solid;
  border-color: transparent transparent rgba(46,45,45,.9);
  border-width: 10px;
  position: absolute;
  top: -20px;
  right: 10px;
}
</style>